<template>
  <div class="myitem">
    <div class="headerr">
      <div class="back" @click="back">
        <img src="../assets/img/back2.png" alt="" />
      </div>
      <div class="bgimg">
        <img
          src="https://img2.baidu.com/it/u=4043495183,2954281760&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          alt=""
        />
      </div>
      <div class="name">小赵</div>
      <div class="occupation">广东.广州</div>
      <div class="introduction"><p>支持为爱冲锋的勇士</p></div>
      <div class="like">
        <div class="num">
          <h3>5</h3>
          <p>人气</p>
        </div>
        <div class="num">
          <h3>0</h3>
          <p>粉丝</p>
        </div>
        <div class="num">
          <h3>0</h3>
          <h3>{{gzlength}}</h3>
          <p>关注</p>
        </div>
      </div>
    </div>
    <div class="bgcover"></div>
    <div class="content">
      <van-tabs v-model="active" animated sticky title-active-color="red">
        <van-tab :title="'手记'">
          <div class="note" v-if="notelist != null">
            <div class="notecontent">
              <p>{{ notelist.title }}</p>
              <router-link
                tag="div"
                :to="'/noteitem?id=' + notelist.id"
                class="middle con"
              >
                <span>{{ notelist.content }}</span>
              </router-link>
              <div class="showimg" v-if="notelist.images">
                <div
                  class="showimg_box"
                  v-for="(img, index) in notelist.images.slice(0, 3)"
                  :key="index"
                >
                  <img :src="img" alt="" />
                </div>
              </div>
              <div class="like">
                <div class="likeit">
                  <img src="../assets/img/like.png" alt="" />
                  <!-- <img src="../assets/img/likes.png" alt=""> -->
                  <span> {{ notelist.count.count_liked }} </span>
                </div>
                <div class="comments">
                  <img src="../assets/img/Comments.png" alt="" />
                  <span> {{ notelist.count.count_commented }} </span>
                </div>
                <div class="share">
                  <img src="../assets/img/share.png" alt="" />
                  <span>{{ notelist.count.count_shared }} </span>
                </div>
              </div>
            </div>
          </div>
          <div class="none" v-if="notelist==null">暂无作品</div>
        </van-tab>
        <van-tab :title="'收藏夹'">
          <div class="collect">
            <div class="collect_content" v-if="mycollect != null">
              <div
                class="contentkk"
                v-for="item in mycollect"
                :key="item.children[0].model.resource.id"
              >
                <router-link tag="div" :to="'/homeitem?reid='+item.children[0].model.resource.id" class="cover" >
                  <img :src="item.children[0].model.resource.cover" alt="" />
                </router-link>
                <div class="title">
                  <p>{{ item.children[0].model.resource.title }}</p>
                </div>
                <div class="looknum">
                  <p>
                    {{ item.children[0].model.resource.duration | playerTime }}
                  </p>
                </div>
              </div>
            </div>
          </div>
             <div class="none" v-if="mycollect==null">暂无收藏</div>
        </van-tab>
        <van-tab :title="'喜欢'">
          <div class="bigCartTop" v-if="mylike != null">
            <div
              class="contentkk"
              v-for="item in mylike"
              :key="item.children[0].model.resource.id"
            >
              <div class="head">
                <div class="left">
                  <div
                    class="heads"
                    :style="{
                      'background-image':
                        'url(' +
                        item.children[0].model.resource.author.userinfo.avatar +
                        ')',
                    }"
                  ></div>

                  <div class="name">
                    {{
                      item.children[0].model.resource.author.userinfo.username
                    }}
                  </div>
                </div>
                <div class="right">
                  <div class="share">
                    <img src="../assets/img/Zk1.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="title">
                <p>{{ item.children[0].model.resource.title }}</p>
              </div>
              <div class="cover">
                <img :src="item.children[0].model.resource.cover" alt="" />
              </div>
              <div class="looknum">
                <p>
                  {{
                    item.children[0].model.resource.count.count_view | num
                  }}观看 |
                  {{ item.children[0].model.resource.duration | playerTime }}
                </p>
              </div>
              <div class="bar">
                <div
                  class="collection"
                  @click="quitCollect(item.children[0].model.resource.id)"
                >
                  <img
                    src="../assets/img/28.png"
                    alt=""
                    v-show="!item.children[0].model.resource.is_private"
                  />
                  <img
                    src="../assets/img/vp.png"
                    alt=""
                    v-show="item.children[0].model.resource.is_private"
                  />
                  <span>{{
                    (item.children[0].model.resource.count.count_collect + 1)
                      | playCountNum
                  }}</span>
                </div>
                <div class="comments">
                  <img src="../assets/img/Ac1.png" alt="" />
                  <span>{{
                    item.children[0].model.resource.count.count_comment
                  }}</span>
                </div>
                <div
                  class="likes"
                  @click="quitlike(item.children[0].model.resource.id)"
                >
                  <img
                    src="../assets/img/like.png"
                    alt=""
                    v-show="!item.children[0].model.resource.vr"
                  />
                  <img
                    src="../assets/img/likes.png"
                    alt=""
                    v-show="item.children[0].model.resource.vr"
                  />
                  <span>{{
                    item.children[0].model.resource.vr == false
                      ? item.children[0].model.resource.count.count_like
                      : item.children[0].model.resource.count.count_like + 1
                  }}</span>
                </div>
              </div>
            </div>
          </div>
           <div class="none" v-if="mylike==null">暂无喜欢</div>
        </van-tab>
        <van-tab :title="'资料'">
          <div class="Information">
            <div class="header">基本资料</div>
            <div class="middle">
              <span class="con"> 性别 </span>
              <span>男</span>
            </div>
            <div class="middle">
              <span class="con"> 年龄 </span>
              <span>18</span>
            </div>
            <div class="middle">
              <span class="con"> 所在地区 </span>
              <span>广州</span>
            </div>
            <div class="middle1">
              <span class="con1"> 简介 </span>
              <span>支持为爱冲锋的勇士</span>
            </div>
            <div class="middle">
              <span class="con"> IP归属地</span>
              <span>广东</span>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mycollect: null,
      active: 2,
      mylike: null,
      notelist: null,
      gzlength:null,
    };
  },
  methods: {
    //   添加或者取消收藏
    quitCollect(id) {
      let templike = JSON.parse(window.localStorage.getItem("islike"));
      let index = templike.findIndex(
        (item) => item.children[0].model.resource.id == id
      );
      templike[index].children[0].model.resource.is_private =
        !templike[index].children[0].model.resource.is_private;
      //  先更新喜欢列表里面的收藏按钮
      window.localStorage.setItem("islike", JSON.stringify(templike));
      this.getLikeFun();
      this.getCollectFun();
      //  console.log(templike[index]);
      //  let tempcollect =JSON.parse(window.localStorage.getItem('iscollect')) //获取收藏地址
      // //如果收藏地址为空
      if (JSON.parse(window.localStorage.getItem("iscollect")) == null) {
        let tempArr = [];
        tempArr.push(templike[index]);
        window.localStorage.setItem("iscollect", JSON.stringify(tempArr));
        this.getLikeFun();
        this.getCollectFun();
      } else {
        // 临时接受的数组
        let receiveTempArr = JSON.parse(
          window.localStorage.getItem("iscollect")
        ); //取出来
        let num = receiveTempArr.findIndex((item) => {
          //判断存储有没有这个对象
          return item.children[0].model.resource.id == id;
        });
        // 判断是否存在   -1表示不存在
        if (num == -1) {
          receiveTempArr.push(templike[index]); //对象加入临时数组
          window.localStorage.setItem(
            "iscollect",
            JSON.stringify(receiveTempArr)
          );
        } else {
          let tempindex = receiveTempArr.findIndex(
            (item) => item.children[0].model.resource.id == id
          );
          receiveTempArr.splice(tempindex, 1);
          window.localStorage.setItem(
            "iscollect",
            JSON.stringify(receiveTempArr)
          );
        }

        this.getCollectFun();
        this.getLikeFun();
      }
    },
    quitlike(id) {
      // console.log(id);
      let temp = JSON.parse(window.localStorage.getItem("islike"));
      let index = temp.findIndex(
        (item) => item.children[0].model.resource.id == id
      );
      temp.splice(index, 1);
      window.localStorage.setItem("islike", JSON.stringify(temp));
      this.mylike.splice(index, 1);
      this.getLikeFun();
    },
    getCollectFun() {
      let temp = JSON.parse(window.localStorage.getItem("iscollect"));
      if (temp != null) {
        this.mycollect = temp.filter(
          (item) => item.children[0].model.resource.is_private == true
        );
      }
      //   console.log(this.mycollect);
    },
    getLikeFun() {
      let templike = JSON.parse(window.localStorage.getItem("islike"));
      if (templike != null) {
        this.mylike = templike.filter(
          (item) => item.children[0].model.resource.vr == true
        );
        console.log(this.mylike, "这是喜欢的");
        let tempcollect = JSON.parse(window.localStorage.getItem("iscollect"));
        if (tempcollect != null) {
          this.mylike.forEach((item) => {
            tempcollect.forEach((i) => {
              //如果喜欢里面有收藏的作品
              if (
                item.children[0].model.resource.id ==
                i.children[0].model.resource.id
              ) {
                item.children[0].model.resource.is_private =
                  i.children[0].model.resource.is_private;
              }
            });
          });
        }
      }
    },
    back() {
      this.$router.push("/user");
    },
    getnote() {
      let temp = JSON.parse(window.localStorage.getItem("note"));
      this.notelist = temp == null ? null : temp;
    },
      getGzlist(){
             let temp=JSON.parse(window.localStorage.getItem('isgz'))
               this.gzlength=temp.length
            }
  },
  created() {
    this.active = Number(this.$route.query.index);
    this.getCollectFun();
    this.getLikeFun();
    this.getnote()
    this.getGzlist()
  },
  filters: {
    playerTime(data) {
      let m = parseInt(data / 60); //分钟
      let s = parseInt(data % 60); //秒

      return (m > 10 ? m : "0" + m) + "'" + (s < 10 ? "0" + s : s) + "''";
    },
    num(value) {
      if (value < 10000) {
        return value;
      }
      let w = value / 10000;
      return Number(w).toFixed(1) + "w";
    },
    playCountNum(value) {
      //134567897
      if (value < 1000) {
        return value;
      } // 1.200    12.000
      let k = value > 1000 ? value / 1000 : value; //千计算
      let w = k > 10 ? (k / 10).toFixed(1) + "w" : k.toFixed(1) + "k"; //万计算

      return w;
    },
  },
};
</script>

<style lang="less" scoped>
.myitem {
  min-height: 667px;
  background-color: #f7f7f7;
  .headerr {
    width: 90%;
    margin: 0 auto;
    position: relative;
    z-index: 5;
    margin-top: 5px;
    .back {
      padding: 10px 0px;
      // position: fixed;
      // top: 10px;
      // left: 10px;
      img {
        width: 30px;
      }
    }
    .bgimg {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      border: 2px solid #fff;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .name {
      color: #fff;
      font-size: 18px;
      padding: 10px 0px;
    }
    .occupation {
      color: #e3d8d8;
      font-size: 12px;
      padding: 5px 0px;
    }
    .introduction {
      color: #e3d8d8;
      font-size: 12px;
      height: 30px;
      padding: 5px 0px;
      p {
        width: 40%;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
    }
    .like {
      padding: 20px 0px;
      display: flex;
      justify-content: space-around;
      .num {
        text-align: center;
        h3 {
          color: #fff;
          font-weight: 600;
          font-size: 14px;
        }
        p {
          color: gray;
          font-size: 13px;
        }
      }
      .gzhu {
        p {
          padding: 5px 20px;
          background-color: red;
          color: #fff;
          border-radius: 15px;
          font-size: 14px;
        }
      }
    }
  }
  .bgcover {
    width: 100%;
    top: 0px;
    height: 295px;
    position: absolute;
    background-image: url(../assets/img/69.png);
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
  }
  .content {
    .van-tabs__wrap {
      top: 5px;
      width: 100%;
    }

    .box1 {
      background-color: #fff;
      .searchlist_content {
        width: 90%;
        margin: 0 auto;
        background-color: #fff;
        .box {
          display: flex;
          justify-content: space-between;
          padding: 10px 0px;
          border-bottom: 1px solid #f2f2f2;

          align-items: center;
          .left {
            width: 48%;
            position: relative;
            .time {
              position: absolute;
              bottom: 8px;
              left: 115px;
              color: #fff;
              font-size: 12px;
            }
            span {
              width: 100%;
              display: block;
              border-radius: 5px;
              overflow: hidden;
              img {
                width: 100%;
                height: 90px;
              }
            }
          }
          .right {
            width: 48%;
            h4 {
              padding: 15px 0px;
              font-size: 10px;
            }
            p {
              font-size: 13px;
              font-weight: 600;
            }
            .name {
              font-size: 12px;
              color: gray;
              line-height: 20px;
              display: flex;
              span {
                display: inline-block;
                margin-right: 8px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                // background-image: url(../assets/img/test.png);
                background-repeat: no-repeat;
                background-size: cover;
              }
            }
          }
        }
      }
    }
    .note {
      .notecontent {
        width: 95%;
        margin: 0 auto;
        // height: 200px;
        padding: 5px 9px;
        margin-top: 10px;
        background-color: #fff;
        .title {
          padding: 10px 0;
          display: flex;
          justify-content: space-between;
          .left {
            display: flex;
            position: relative;
            .img {
              width: 35px;
              height: 35px;

              img {
                border-radius: 50%;
                height: 35px;
                width: 35px;
              }

              background-repeat: no-repeat;
              background-size: cover;
            }
            .name {
              display: flex;
              flex-direction: column;
              justify-content: center;
              padding-left: 8px;
              h3 {
                font-size: 14px;
                font-weight: 600;
              }
              p {
                font-size: 10px;
                color: gray;
              }
            }
            .vip {
              position: absolute;
              top: 25px;
              left: 22px;
              img {
                width: 12px;
              }
            }
          }
          .right {
            display: flex;
            align-items: baseline;
            .add {
              display: flex;
              padding-right: 15px;
              img {
                display: block;
                width: 10px;
                height: 10px;
                margin: 4px 5px;
              }
              p {
                color: #f21618;
                font-size: 13px;
              }
              .haveadd {
                color: gray;
              }
            }

            span {
              display: block;
              img {
                width: 12px;
              }
            }
          }
        }
        .middle {
          padding: 3px 0px;

          span {
            font-size: 13px;
          }
        }
        .con {
          text-overflow: ellipsis;
          overflow: hidden;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
        }
        .showimg {
          display: flex;
          flex-wrap: nowrap;
          padding: 10px 0px;
          border-bottom: 1px solid #f2f2f2;
          .showimg_box {
            width: 30%;
            border-radius: 5px;
            overflow: hidden;
            margin-right: 13px;
            img {
              width: 107px;
              height: 107px;
            }
          }
          .showimg_box:last-child {
            margin-right: 0px;
          }
        }
        .like {
          display: flex;
          justify-content: space-around;
          padding: 10px 0px;
          .likeit,
          .comments,
          .share {
            width: 30%;
            display: flex;
            justify-content: center;
            img {
              display: block;
              width: 17px;
              height: 17px;
              margin-right: 5px;
            }
            span {
              display: block;
              height: 20px;
              line-height: 20px;
              color: gray;
              font-size: 13px;
            }
          }
        }
      }
    }
    .collect {
      width: 90%;
      margin: 0 auto;
      .collect_content {
        padding: 10px 0px;
        display: flex;
        flex-wrap: wrap;
        .contentkk {
          position: relative;
          width: 40%;
          margin-right: 10px;
          margin-bottom: 10px;
          .cover {
            border-radius: 8px;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
          .title {
            padding: 3px 0px;
            font-size: 10px;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
          .looknum {
            position: absolute;
            top: 56px;
            right: 8px;
            p {
              font-size: 12px;
              color: rgb(255, 255, 255);
            }
          }
        }
      }
    }
    .bigCartTop {
      width: 95%;
      margin: 0 auto;
      margin-bottom: 60px;
      .contentkk {
        width: 100%;
        margin: 10px auto;
        border: 1px solid #f2f2f2;
        overflow: hidden;
        border-radius: 8px;
        background-color: rgb(255, 255, 255);
        position: relative;
        .head {
          width: 100%;
          background-color: #fff;
          display: flex;
          justify-content: space-between;
          padding: 10px 0px;
          border-bottom: 2px solid #f2f2f2;
          .left {
            display: flex;
            align-items: center;
            position: relative;
            width: 50%;
            .heads {
              border-radius: 50%;
              width: 30px;
              height: 30px;
              background-size: cover;
              background-repeat: no-repeat;
              margin-right: 10px;
              margin-left: 10px;
            }
            .name {
              font-size: 13px;
              font-weight: 600;
              color: black;
            }
          }
          .right {
            display: flex;
            align-items: center;
            .gzhu {
              display: flex;
              align-items: center;
              padding: 1px 12px;
              margin-right: 20px;

              border-radius: 15px;

              img {
                width: 8px;
                height: 8px;
                margin-right: 5px;
              }
              span {
                font-size: 12px;
                color: #5b5757;
              }
            }
            .havegzhu {
              padding: 1px 12px;
              margin-right: 20px;
              border: 1px solid f2f2f2;
              border-radius: 15px;

              span {
                font-size: 14px;
                color: gray;
              }
            }
            .share {
              margin-right: 10px;
              img {
                width: 15px;
                height: 15px;
              }
            }
          }
        }
        .title {
          padding: 10px 0px;
          padding-left: 10px;
          p {
            font-weight: 600;
            font-size: 14px;
          }
        }
        .cover {
          width: 100%;

          img {
            width: 100%;
            height: 200px;
          }
        }
        .looknum {
          position: absolute;
          bottom: 50px;
          right: 15px;
          z-index: 50;
          p {
            text-align: end;
            color: #fffcfc;
            font-size: 14px;
          }
        }
        .bar {
          display: flex;
          justify-content: space-around;
          padding: 10px 0px;
          .collection,
          .comments,
          .likes {
            display: flex;
            align-items: center;
            span {
              display: block;
              color: gray;
              font-size: 14px;
            }
            img {
              width: 15px;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .none {
     
      // height: 330px;
      box-sizing: border-box;
      padding-top: 100px;
      width: 100%;
      text-align: center;
      color: gray;
    }
    .Information {
      background-color: #fff;
      width: 90%;
      margin: 0 auto;
      padding: 18px;
      min-height: 296px;
      .header {
        color: black;
        font-size: 14px;
        padding: 5px 0px;
      }
      .middle {
        padding: 10px 0px;
        span {
          color: black;
          font-size: 12px;
        }
        .con {
          color: gray;
          font-size: 12px;
          display: inline-block;
          width: 30%;
        }
      }
      .middle1 {
        display: flex;
        span {
          display: block;
          color: black;
          font-size: 12px;
          width: 57%;
        }
        .con1 {
          width: 29%;
          color: gray;
          font-size: 12px;
          display: inline-block;
        }
      }
    }
  }
}
</style>